<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 顶部页面工具条 开始 -->
      <PageTools :show-before="true">
        <template #before>共{{ page.total }}条记录</template>
        <template #after>
          <el-button size="small" type="warning">导入</el-button>
          <el-button size="small" type="danger">导出</el-button>
          <el-button size="small" type="primary">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 顶部页面工具条 结束 -->
      <!-- 员工列表表格 开始 -->
      <el-card>
        <el-table
          :data="empolyeeList"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" width="60" type="index" />
          <el-table-column prop="username" label="姓名" width="180" />
          <el-table-column prop="workNumber" label="工号" width="180" />
          <el-table-column prop="formOfEmployment" label="聘用形式" width="180" />
          <el-table-column prop="departmentName" label="部门" width="180" />
          <el-table-column prop="timeOfEntry" label="入职时间" width="180" />
          <el-table-column prop="enableState" label="账户状态" width="180" />
          <el-table-column label="操作" width="260">
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 开始 -->
        <el-pagination
          :page-size="page.size"
          layout="total, prev, pager, next"
          :total="page.total"
          style="text-align:center;margin-top:20px"
          @current-change="currentChange"
        />
      <!-- 分页组件 结束 -->
      </el-card>
      <!-- 员工列表表格 结束 -->
    </div>
  </div>
</template>

<script>
import { getEmployeeList } from '@/api/empolyees'
export default {
  data() {
    return {
      empolyeeList: [],
      page: {
        page: 1,
        size: 5,
        total: 0
      }
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 获取员工列表 处理函数
    async getEmployeeList() {
      const { rows, total } = await getEmployeeList(this.page)
      console.log(rows)
      this.empolyeeList = rows
      this.page.total = total
    },
    // 页数更改 处理函数
    currentChange(newPage) {
      this.page.page = newPage
      this.getEmployeeList()
    }
  }
}
</script>

<style>

</style>
